@import "src/_vars.scss";

mat-accordion.side-bar {
  display: block;
  margin: $panelMargin;
  width: 240px;
  max-height: 75vh;
  overflow: auto;
  @media only screen and (max-width: 400px) {
    margin: 0;
  }

  mat-expansion-panel {
    background-color: $gray;
    border-radius: 0;
    border-bottom: solid 1px $darkGray;
    box-shadow: none;

    &:last-child {
      border-bottom: none;
    }

    a {
      color: $text;
      text-decoration: none;
      &.active,&:hover {
        color: $active;
      }
    }

    mat-expansion-panel-header {
      padding: 0 15px;
      .title {
        color: $text;
        font-family: Arial;
        font-weight: 700;
        font-size: 13px;
        line-height: 16px;
        margin: 0;
      }
    }

    mat-list {
      padding: 0;
    }

    mat-list-item {
      height: auto;
      width: auto;
      font-size: 13px;
      line-height: 16px;
      padding: 5px 15px 5px 20px;
    }
  }

  ::ng-deep {
    .mat-expansion-panel-body {
      padding: 0;

      .mat-list-item-content {
        padding: 0;
      }
    }

    .mat-expansion-indicator::after {
      border-width: 0 1px 1px 0;
      margin-bottom: 5px;
    }

    .mat-expansion-panel-spacing {
      margin: 0;
      padding-bottom: 5px;
    }
  }
}


